<template>
  <div class='head-menu'>
    <el-menu mode='horizontal'
              :default-active="routeName"
              background-color='#FFFFFF'
              text-color='#333333'
              active-text-color='#13C228'
              @select='handleSelect'>
      <el-menu-item v-for='item in list' :key='item.name' :index='item.name'>{{ item.label }}</el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: 'HeaderThird',
  data() {
    return {
      list: [
        {
          label: "首页",
          name: "/",
        },
        {
          label: "原辅料采购",
          name: "/mall/materials",
        },
        {
          label: "食品机械",
          name: "/mall/food",
        },
        {
          label: "仓储物流",
          name: "/mall/logistics",
        },
        // {
        //   label: "品牌中心",
        //   name: "/mall/brand",
        // },
        {
          label: "食品安全",
          name: "/mall/security",
        },
        {
          label: "科技研发",
          name: "/mall/research",
        },
        {
          label: "金融服务",
          name: "/mall/finance",
        },
        {
          label: "电商服务",
          name: "/mall/retailers",
        },
        {
          label: "人才服务",
          name: "/mall/personnel",
        }
      ]
    }
  },
  computed: {
    routeName() {
      const route = this.$route
      return route.path
    },
  },
  methods:{
    handleSelect (name) {
      this.$router.push({ path: name })
    }
  }
}
</script>

<style scoped lang="scss">
@import "@/style/color.scss";
.head-menu {
  width: $bigWidth;
  margin: 0 auto;
}
::v-deep .el-menu {
  border-bottom: none;
  .el-menu-item {
    height: 40px;
    line-height: 40px;
  }
}
</style>
